<template>
    <div>
        {{ shopTitle }}
        <!-- {{ $store.state.shop.title }} -->
        <hr>
        {{ infoAdminTitle }}
        <!-- {{ $store.state.info.admin.title }} -->
        <hr>
        root/{{ avatar }}
        <hr>
        root/{{ title }}
        <hr>
        {{ shop.title }}
        <hr>
        {{ info.admin.title }} ---
        {{ info.admin.auth }}
        <hr>
        {{ adminTitle }}---{{ auth }}
    </div>
</template>
<script>
import { mapState } from "vuex";
/*
 mapState
    1. 参数是一个对象，在对象中定义方法（计算属性）
    2. 返回定义的对象
    3. 可以使用 属性名:'根状态名' , 属性名:'模块名'，简化根状态和模块状态
    4. 如果“属性名”和“根状态名” 或者 “模块名” 相同，那么可以进一步简化为数组写法
    5. 传两个参数，第一个参数命名空间，第二个参数是属性对象或者是数组，表示对命名空间下的状态进行转换。
*/

export default {
    computed: {
        // ...mapState('info/admin', ['title', 'auth']),
        ...mapState('info/admin', {
            adminTitle: 'title',
            auth: 'auth',
        }),
        ...mapState(['shop', 'cart', 'info', 'title', 'avatar']),
        ...mapState({
            // shop: 'shop',
            // cart: 'cart',
            // info: 'info',
            // shop: (state) => state.shop,
            // shop() {
            //     return this.$store.state.shop
            // },
        }),
        ...mapState({
            // title: 'title',
            // avatar: 'avatar',// 只能针对根状态有效
            // avatar: (state) => state.avatar,
            shopTitle() {
                return this.$store.state.shop.title
            },
            infoAdminTitle() {
                return this.$store.state.info.admin.title
            }
        })
    },
    // computed:mapState({}),
}
</script>